<template>
    <v-layout type="main">
        <div class="detail-layout">
            <el-form class="form myself-form alick-add-form" ref="form" :model="addForm" :rules="submitRules" label-width="120px">
                <div>
                    <h3 class="add-alike-title">配置</h3>
                    <el-form-item label="数据集">
                        <plug-dataset :dataset_list="addForm.dataset_list" @infoDataset="infoDataset"
                            v-if="addForm.dataset_list" />
                    </el-form-item>
                    <div class="node-module">
                        <h3 class="node-module-title">主节点</h3>
                        <el-form-item label="环境" prop="name">
                            <div>
                                <el-radio-group v-model="mainNode.visibility"
                                    @change="changeMasterEngine(mainNode.visibility, mainNode.engine)" size="small">
                                    <el-radio-button label='2'>公开的</el-radio-button>
                                    <el-radio-button label='1'>共享的</el-radio-button>
                                    <el-radio-button label='0'>我的</el-radio-button>
                                </el-radio-group>
                            </div>
                            <el-radio-group v-model="mainNode.engine"
                                @change="changeMasterEngine(mainNode.visibility, mainNode.engine)" size="small">
                                <el-radio-button label='0'>Pytorch</el-radio-button>
                                <el-radio-button label='1'>TensorFlow</el-radio-button>
                                <el-radio-button label='2'>其他</el-radio-button>
                            </el-radio-group>
                            <div class="select">
                                <el-select size="mini" v-model="mainNode.image_id" prop="main_image_id"
                                    class="full-extent-select">
                                    <el-option v-for="item in mainNode.imageOptions" :value="item.id" :label="item.name"
                                        :key="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                        <el-form-item label="资源组">
                            <el-select size="mini" v-model="mainNode.product_id" prop="main_product"
                                class="full-extent-select">
                                <el-option v-for="item in productOptions" :value="item.id" :label="item.name"
                                    :key="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <div class="right-btn-box" v-if="slaveNodeList.length == 0">
                            <span class="outin-handle">
                                <a href="javascript:;" @click="addSlaveNode()">增加</a>
                            </span>
                        </div>
                    </div>
                    <div v-for="(tag, i) in slaveNodeList" :key="i">
                        <div class="node-module">
                            <h3 class="node-module-title">从节点</h3>

                            <el-form-item label="环境" prop="name">
                                <div>
                                    <el-radio-group v-model="tag.visibility"
                                        @change="changeSlaveEngine(tag.visibility,tag.engine,i)" size="small">
                                        <el-radio-button label='2'>公开的</el-radio-button>
                                        <el-radio-button label='1'>共享的</el-radio-button>
                                        <el-radio-button label='0'>我的</el-radio-button>
                                    </el-radio-group>
                                </div>
                                <el-radio-group v-model="tag.engine" size="small"
                                    @change="changeSlaveEngine(tag.visibility,tag.engine,i)">
                                    <el-radio-button label='0'>Pytorch</el-radio-button>
                                    <el-radio-button label='1'>TensorFlow</el-radio-button>
                                    <el-radio-button label='2'>其他</el-radio-button>
                                </el-radio-group>
                                <div class="select">
                                    <el-select size="mini" v-model="tag.image_id" class="full-extent-select"
                                        prop="main_image_id">
                                        <el-option v-for="item in tag.imageOptions" :value="item.id" :label="item.name"
                                            :key="item.id">
                                        </el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                            <el-form-item label="资源组">
                                <el-select size="mini" v-model="tag.product_id" class="full-extent-select">
                                    <el-option v-for="item in productOptions" :value="item.id" :label="item.name"
                                        :key="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="数量">
                                <el-input-number size="mini" v-model="tag.pod_num"></el-input-number>
                            </el-form-item>
                            <div class="right-btn-box">
                                <span class="outin-handle">
                                    <a href="javascript:;" @click="delSlaveNode(i)">删除</a>
                                    <a href="javascript:;" @click="addSlaveNode()"
                                        v-if="i == slaveNodeList.length - 1">增加</a>
                                </span>
                            </div>
                        </div>
                    </div>

                    <el-form-item label="端口" prop="port">
                        <div class="outin-box" v-for="(e, i) in port_list" :key="i">
                            <div class="port-lis">
                                <el-radio-group v-model="e.protocol" class="port-lis-radio">
                                    <el-radio :label="2">tcp</el-radio>
                                    <el-radio :label="1">http</el-radio>
                                </el-radio-group>
                                <el-input type="text" v-model="e.port" size="mini" class="port-el-input" />
                            </div>
                            <span class="outin-handle">
                                <a href="javascript:;" @click="addPort(i)" v-if="i == port_list.length - 1">增加</a>
                                <span v-else class="slot-btn"></span>
                                <a href="javascript:;" @click="delPort(i)" v-if="port_list.length > 1">删除</a>
                            </span>
                        </div>
                    </el-form-item>
                </div>
                <el-form-item label=" ">
                    <el-button class="none-type" @click="submmit">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </v-layout>
</template>
  
<script>
import {  addMarketAlgorithmVersion, putMarketAlgorithmVersion } from '@/api/marketAlgorithmVersion'
import plugDataset from '@/components/module/plug-in-dataset'
import { getAllProducts } from '@/api/product'
import { getAllImages, getImageDetail } from '@/api/image'
import { getExperimentDetail } from '@/api/notebook'
export default {
    data() {
        return {
            active: 1,
            addForm: {
                is_webide: true,
            },
            submitRules: {
                main_image_id: [
                    { required: true, message: "该项为必填项" },
                ],
                main_product: [
                    { required: true, message: "该项为必填项" },
                ],
                // port: [
                //   { required: true, message: "请填写端口" },
                // ]
            },
            mainNode: { visibility: '2', engine: '0', pod_num: 1, type: 0, imageOptions: [] },
            slaveNodeList: [],
            port_list: [{ protocol: 2 }],
            imageOptions: [],
            productOptions: [],
            path: "",
            bizId: "",
            algorithm_id: this.$route.query.algorithm_id,
            version: this.$route.query.version,
            business_id: this.$route.query.business_id,
            business_type: this.$route.query.business_type,
            source: this.$route.query.source

        };
    },
    components: {
        plugDataset
    },
    async created() {
        this.getData()
    },
    async mounted() {
        this.$forceUpdate();
    },
    methods: {
        async setAddForm() {
            this.addForm.node_group_list = []
            this.mainNode.type = 1
            this.addForm.node_group_list.push(this.mainNode)
            for (let i = 0; i < this.slaveNodeList.length; i++) {
                this.slaveNodeList[i].type = 2
                this.addForm.slaveNodeList.push(this.slaveNodeList[i])
            }
            this.addForm.port_list = []
            for (let i = 0; i < this.port_list.length; i++) {
                if (this.port_list[i].port) {
                    this.addForm.port_list.push(this.port_list[i])
                }
            }
        },
        async getAddForm(data) {
            //this.addForm = data
            this.addForm.id = null
            this.port_list = []
            this.slaveNodeList = []
            for (let node of data.node_group_list) {
                if (node.type == 1) {
                    this.mainNode =  node
                } else {
                    this.slaveNodeList.push(node)
                }
            }
            let res = await getImageDetail({ id: this.mainNode.image_id })
            let mainImage = res.data
            this.mainNode.visibility = mainImage.visibility
            this.mainNode.engine = mainImage.engine
            this.mainNode.image_id = mainImage.id
            this.changeMasterEngine(this.mainNode.visibility, this.mainNode.engine)

            if (data.port_list) {
                this.port_list = data.port_list
            }
            if (this.port_list.length == 0) {
                this.port_list.push({ protocol: 2 })
            }
        },
        async getData() {
            let res = await getExperimentDetail({ id: this.business_id});
            this.getAddForm(res.data)
            this.addForm.algorithm_id = this.algorithm_id
            this.addForm.version = 'v' + this.version
            this.addForm.business_type = 1
            this.addForm.business_id = this.business_id
            this.getProductList()
        },
        async submmit() {
            this.setAddForm()
            console.log('form',this.addForm)
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    if (this.addForm.id) {
                        console.log('putform')
                        let ret = await putMarketAlgorithmVersion({ ...this.addForm })
                        if (ret && ret.data) {
                            this.active = 3
                            this.toDetail()
                        }
                    }
                    else {
                        console.log('addform')
                        let ret = await addMarketAlgorithmVersion({ ...this.addForm })
                        if (ret && ret.data) {
                            this.active = 3
                            this.toDetail()
                        }
                    }
                }
            })
        },
        toDetail() {
            let query = {
                id: this.addForm.algorithm_id
            }
            this.$router.push({
                path: '/market/code',
                query
            })
        },
        infoDataset(datasets) {
            console.log('infoDataset', datasets)
            this.addForm.dataset_list = []
            for (let dataset of datasets) {
                let data = {}
                data.dataset_id = dataset.id
                this.addForm.dataset_list.push(data)
            }
        },
        async getProductList() {
            let res = await getAllProducts()
            this.productOptions = res.data
        },

        addPort() {
            this.port_list.push({ protocol: 2 })
        },
        delPort(i) {
            this.port_list.splice(i, 1)
        },
        succeedOver(data) {
            console.log(data)
        },
        async changeMasterEngine(visibility, engine) {

            let ret = await getAllImages({ visibility: visibility, engine: engine, type: 1 })
            this.mainNode.imageOptions = ret.data
            console.log('mainNode', this.mainNode)
        },
        async changeSlaveEngine(visibility, engine, i) {
            let ret = await getAllImages({ visibility: visibility, engine: engine, type: 1 })
            this.slaveNodeList[i].imageOptions = ret.data
        },
        addSlaveNode() {
            this.slaveNodeList.push({ visibility: '2', engine: '1', type: 1, imageOptions: [] })
        },
        delSlaveNode(i) {
            this.slaveNodeList.splice(i, 1)
        },
    },
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-add.less";
</style>